<template>
	<div id="app-container" class="app-container">
		<div id="filter-container" class="filter-container">
			<div id="search" class="search">
				<el-form>
					<el-form-item>
						<search-form ref="SearchForm" size="small" label-width="80px" :searchSet="searchSet" :search-data="searchData" :search-form="searchForm" :search-handle="searchHandle" :is-handle="true" />
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div id="buttens">
			<el-form inline v-if="buttens.length>0">
				<el-form-item v-for="butten in buttens" :key="butten">
					<el-button size="small" :type="butten=='Add'?'success':butten=='Update'?'warning':butten=='Delete'?'danger':butten=='Export'?'primary':butten" class="promiseButton" :icon="butten=='Add'?'el-icon-edit':butten=='Update'?'el-icon-edit':butten=='Delete'?'el-icon-delete':butten=='Export'?'el-icon-download':butten" :loading="butten=='Export'?downloadLoading:false" @click="butten=='Add'?OpenDialog(false):butten=='Update'?OpenDialog(true,rows):butten=='Delete'?Delete(rows):butten=='Export'?Export():null">
						{{butten=='Add'?'新增':butten=='Update'?'更新':butten=='Delete'?'删除':butten=='Export'?'导出':butten}}
					</el-button>
				</el-form-item>
				<el-form-item style="float:right;margin-right:5px">
					<i class="el-icon-refresh" @click="handleQuery" style="font-size:19px;"> </i>
				</el-form-item>
			</el-form>
		</div>

		<div class="table">
			<!--引入表格组件        -->
			<table-vue v-loading="loadingTable" :columns="columns" :data="dataList" :table-set="tableSet" :rows="rows"   @current-change="Choose" @selection-change="SelectionChange" @row-dblclick="dbClick" @changeSortCallBack="changeSortCallBack" empty-text="暂无数据">
				<!-- #是v-slot的简写，{scope: {row, $index}}是属性对象slot双重解构，注意这里的scope要与子组件插槽绑定的属性名对应 -->
				<!-- 操作列 -->
				<!-- <template #handle="{scope: {row,$index}}" > -->
				<!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="OpenDialog(true,row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="Delete(row, $index)">删除</el-button> -->
				<!-- <el-button  @click="column.formatter"> name</el-button> -->
				<!-- handlel里面的参数是子组件slot里面自定义的属性传递的参数 -->
				<template #handle="{buttens,scope:{row}}">
					<el-button v-for="item in buttens" :key="item.name" size="mini" type="text" :icon="item.icon" @click="item.handle(row)">{{item.name}}</el-button>
				</template>
			</table-vue>
		</div>
		<pagination id="pagination" v-show="pageSearch" :total="total" :page.sync="searchParams.pageIndex" :limit.sync="searchParams.pageSize" @pagination="handleQuery" />
		<div>
			<el-dialog :title="dialogSet.isEdit?'编辑'+dialogSet.title:'新增'+dialogSet.title" @close='closeDialog' v-if="dialogSet.dialogVisible" :visible.sync="dialogSet.dialogVisible" :edit.sync="dialogSet.isEdit" width="700px" center>
				<new-dialog ref="newDialog" v-if="dialogSet.dialogVisible" :visible.sync="dialogSet.dialogVisible" :edit.sync="dialogSet.isEdit" :dialog-form-data="dialogFormData" :dialog-form="dialogForm" @update="update" @add="add" @close='closeDialog' />
			</el-dialog>
		</div>
	</div>
</template>
<script>
import SearchForm from "@/components/common/Search";
import TableVue from "@/components/common/TableView";
import newDialog from "@/components/common/newDialog";
import Pagination from "@/components/common/Pagination";
var dialogFormDatatemp = {}; //中间变量
export default {
	components: {
		SearchForm,
		TableVue,
		newDialog,
		Pagination,
	},
	props: {
		SearchSet: {
			type: Object,
			default: {},
		},
		SearchForm: {
			type: Array,
			default: [],
		},
		SearchData: {
			type: Object,
			default: {},
		},
		TableSet: { type: Object, default: {} },
		Columns: {
			type: Array,
			default: () => [],
		},
		DialogSet: {
			type: Object,
			default: {},
		},
		DialogFormData: {
			type: Object,
			default: {},
		},
		DialogForm: {
			type: Object,
			default: {},
		},
		RequestController: {
			type: String,
			default: undefined,
		},
		DataList: {
			type: Array,
			default: () => [],
		},
		pageSearch: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			//页面组件配置
			//===================================================//

			//搜索框按钮
			searchHandle: [
				{
					label: "查询",
					type: "primary",
					handle: this.handleQuery,
					icon: "el-icon-search",
				},
				{
					label: "重置",
					type: "primary",
					handle: this.Reset, //读取子组件中的方法
					icon: "el-icon-refresh",
				},
			],
			//搜索框及搜索按钮是否展示
			searchSet: this.SearchSet,
			//搜索框配置及数据
			searchForm: this.SearchForm,

			//表格相关配置
			tableSet: this.TableSet,
			//表格表头数据
			//Object.freeze 百度去理解 提升性能并且禁止对于该对象的属性进行修改（
			columns: this.Columns,
			//新增编辑弹出框相关配置
			dialogSet: this.DialogSet,
			//新增编辑相关信息
			dialogFormData: this.DialogFormData,
			//新增编辑form
			dialogForm: this.DialogForm,
			//要监测变化DataList需要用watch
			dataList: this.DataList,
			buttens: [],
			//加载表格
			loadingTable: true,
			//下载表格
			downloadLoading: false,
			searchData: this.SearchData,
			searchParams: {
				pageIndex: 1,
				pageSize: 20,
				orderColumn: "", //排序字段
				orderSort: "", //排序顺序
			},
			total: 0, //查询返回的总条
			//页面逻辑参数等
			//=======================================================//
			//选中的行
			rows: [],
			//请求的后台Controller
			requestController: this.RequestController,
		};
	},
	created: function () {
    
		//  this.load();
	},
	mounted: function () {
		dialogFormDatatemp = this.dialogFormData;
		this.load();
		this.handleQuery();
	},
	watch: {
		DataList: function (value) {
			this.dataList = value;
		},
    
	},
	methods: {
		load() {
			//获取按钮权限(展示哪些按钮)
			this.buttens = this.$store.getters.buttens;
			console.log(this.buttens);
		},
		//排序回调事件
		changeSortCallBack(props, order) {
			this.searchParams.orderColumn = props;
			this.searchParams.orderSort = order;
			this.handleQuery();
		},
		handleQuery() {
			if (this.pageSearch == false) {
				this.searchParams = {};
			}
			this.baseRequest
				.Post(
					this.requestController + "/List",
					this.searchData,
					this.searchParams
				)
				.then((res) => {
          this.loadingTable=false
					this.total = res.total;
					//回调父方法
					this.$emit("handleQueryCallBack", res);
					// this.$parent.handleQueryCallBack(res);
					// this.dataList = res.bodyList;
				});
		},
		//双击表格行事件
		dbClick(row) {
			//标题为空时 双击不弹出编辑框
			if (this.dialogSet.title == '' || this.buttens.indexOf("Update") < 0) {
				return;
			}
			this.OpenDialog(true, [row]);
		},
    
		closeDialog() { 
     this.handleQuery();
      },
		OpenDialog(update, rows) {
			if (update == true) {
				if (rows == undefined || rows.length <= 0) {
					this.$msgbox.alert("请选则需要更新的行", { center: true });
					return;
				}
				this.dialogFormData = rows[0];
				this.dialogSet.isEdit = true;
				//  this.dialogSet.title="更新";
				this.dialogFormData = rows[0];
			} else {
				//清空this.dialogFormData的值
				this.dialogFormData = dialogFormDatatemp;
				this.dialogSet.isEdit = false;
			}
			this.$emit("OpenDialogCallBack", update, rows);
			this.dialogSet.dialogVisible = true;
		},

		//切换选中行触发
		Choose(row) {
			// this.row=row
			// console.log(row);
		},
		//勾选行事件
		SelectionChange(rows) {
			this.rows = rows;
		},
		add() {
			//获取子组件的子组件
			// console.log(this.$refs['newDialog'].$refs['form'].$refs['ruleForm'])

			this.$refs["newDialog"].$refs["form"].$refs["ruleForm"].validate(
				(valid) => {
					if (valid) {
						this.baseRequest
							.Post(this.requestController + "/Add", this.dialogFormData)
							.then((res) => {
								this.$message({
									message: "新增成功",
									type: "success",
								});
								this.$emit("addCallBack", res);
								this.dialogSet.dialogVisible = false;
								this.handleQuery();
							});
					} else {
						this.$msgbox.alert("提交失败");
						return false;
					}
				}
			);
		},
		update() {
			this.$refs["newDialog"].$refs["form"].$refs["ruleForm"].validate(
				(valid) => {
					if (valid) {
						this.baseRequest
							.Post(this.requestController + "/Update", this.dialogFormData)
							.then((res) => {
								this.$message({
									message: "修改成功",
									type: "success",
								});
								this.$emit("updateCallBack", res);
								this.dialogSet.dialogVisible = false;
								this.handleQuery();
							});
					} else {
						this.$msgbox.alert("提交失败");
						return false;
					}
				}
			);
		},
		Delete(rows) {
			if (rows == undefined || rows.length <= 0) {
				this.$msgbox.alert("请选则需要删除的行");
				return;
			}
			var idList = [];
			rows.forEach((item) => {
				idList.push(item[this.tableSet.idColum]);
			});
			this.baseRequest
				.Post(this.requestController + "/Delete", {}, { idList: idList })
				.then((res) => {
					this.$message({
						message: "删除成功",
						type: "success",
					});
					this.$emit("deleteCallBack", res);
					this.handleQuery();
				});
		},
		Export() {
			this.downloadLoading = true;
			// this.downloadLoading=false;
		},
		//重置
		Reset() {
			Object.keys(this.searchData).forEach((key) => {
				// if (
				//   key === "pageIndex" ||
				//   key === "pageSize" ||
				//   key === "orderColumn" ||
				//   key === "orderSort"
				// ) {
				//   return;
				// }
				this.searchData[key] = "";
			});
		},
	},
};
</script>
<style lang="scss">
.promiseButton {
	float: left;
	margin-bottom: 8px;
}
</style>
